function ProductNav() {
    // 获取导航栏中的 a 标签
    let nav_a = document.getElementsByClassName("Navigation_nav_a");
    // 获取到要显示的 div
    let productdetail = document.getElementById("NavigationProduct");

    // 遍历 nav_a 集合中的元素并添加鼠标悬停事件监听
    for (let i = 0; i < nav_a.length; i++) {
        nav_a[i].addEventListener('mouseover', function () {
            // 显示 NavigationProduct
            productdetail.style.height = '230px';
        });

        // 添加鼠标移出事件监听
        nav_a[i].addEventListener('mouseout', function () {
            // 隐藏 NavigationProduct
            productdetail.style.height = '0';
        });
    }
}
function lunbo() {
    document.addEventListener('DOMContentLoaded', function () {
        const slides = document.querySelectorAll('.carousel-slides li');
        const prevButton = document.querySelector('.carousel-prev');
        const nextButton = document.querySelector('.carousel-next');
        const dots = document.querySelectorAll('.dot');
        let currentIndex = 0;
        let timer;

        function showSlide(index) {
            slides.forEach((slide, i) => {
                slide.classList.remove('active');
                dots[i].classList.remove('active');
            });
            slides[index].classList.add('active');
            dots[index].classList.add('active');
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % slides.length;
            showSlide(currentIndex);
        }

        function prevSlide() {
            currentIndex = (currentIndex - 1 + slides.length) % slides.length;
            showSlide(currentIndex);
        }

        prevButton.addEventListener('click', prevSlide);
        nextButton.addEventListener('click', nextSlide);

        dots.forEach((dot, i) => {
            dot.addEventListener('click', () => {
                showSlide(i);
            });
        });

        function startAutoPlay() {
            timer = setInterval(() => {
                nextSlide();
            }, 3000);
        }

        function stopAutoPlay() {
            clearInterval(timer);
        }

        startAutoPlay();

        const carousel = document.querySelector('.carousel');
        carousel.addEventListener('mouseenter', stopAutoPlay);
        carousel.addEventListener('mouseleave', startAutoPlay);

        showSlide(currentIndex);
    });
}

function qh() {
    let er = document.getElementById("er");
    let cd = document.getElementById("cd");

    let Hot = document.getElementById("Hot");
    let air = document.getElementById("air");
    let TV = document.getElementById("TV");

    let electric = document.getElementById("electric");
    let sweeper = document.getElementById("sweeper");
    let purification = document.getElementById("purification");
    let clean = document.getElementById("clean");

    let qh = document.getElementById("Popular1");
    let qh2 = document.getElementById("Popular2");
    let HotProduct = document.getElementById("HotProduct");
    let TvProduct = document.getElementById("TvProduct");
    let airProduct = document.getElementById("airProduct");

    let electricProduct = document.getElementById("electricProduct");
    let sweeperProduct = document.getElementById("sweeperProduct");
    let purificationProduct = document.getElementById("purificationProduct");
    let cleanProduct = document.getElementById("cleanProduct");

    let water = document.getElementById("water");
    let smoke = document.getElementById("smoke");
    let rice = document.getElementById("rice");
    let steaming = document.getElementById("steaming");

    let waterProduct = document.getElementById("waterProduct");
    let smokeProduct = document.getElementById("smokeProduct");
    let riceProduct = document.getElementById("riceProduct");
    let steamingProduct = document.getElementById("steamingProduct");

    let smart = document.getElementById("smart");
    let router = document.getElementById("router");
    let Door = document.getElementById("Door");
    let speaker = document.getElementById("speaker");

    let speakerProduct = document.getElementById("speakerProduct");
    let DoorProduct = document.getElementById("DoorProduct");
    let routerProduct = document.getElementById("routerProduct");
    let smartProduct = document.getElementById("smartProduct");


    // 页面加载时设置初始显示状态
    qh.style.display = 'block';
    qh2.style.display = 'none';

    er.style.textDecoration = 'underline';
    er.style.color = '#ff6a00';
    cd.style.textDecoration = 'none';
    cd.style.color = 'black';

    HotProduct.style.display = 'block';
    TvProduct.style.display = 'none';
    airProduct.style.display = 'none';

    Hot.style.textDecoration = 'underline';
    Hot.style.color = '#ff6a00';
    air.style.textDecoration = 'none';
    air.style.color = 'black';
    TV.style.textDecoration = 'none';
    TV.style.color = 'black';

    electric.style.textDecoration = 'underline';
    electric.style.color = '#ff6a00';
    sweeper.style.textDecoration = 'none';
    sweeper.style.color = 'black';
    purification.style.textDecoration = 'none';
    purification.style.color = 'black';
    clean.style.textDecoration = 'none';
    clean.style.color = 'black';


    electricProduct.style.display = 'block';
    sweeperProduct.style.display = 'none';
    purificationProduct.style.display = 'none';
    cleanProduct.style.display = 'none';

    water.style.textDecoration = 'underline';
    water.style.color = '#ff6a00';
    smoke.style.textDecoration = 'none';
    smoke.style.color = 'black';
    rice.style.textDecoration = 'none';
    rice.style.color = 'black';
    steaming.style.textDecoration = 'none';
    steaming.style.color = 'black';

    speaker.style.textDecoration = 'underline';
    speaker.style.color = '#ff6a00';
    Door.style.textDecoration = 'none';
    Door.style.color = 'black';
    router.style.textDecoration = 'none';
    router.style.color = 'black';
    smart.style.textDecoration = 'none';
    smart.style.color = 'black';

    speakerProduct.style.display = 'block';
    DoorProduct.style.display = 'none';
    routerProduct.style.display = 'none';
    smartProduct.style.display = 'none';


    er.addEventListener('mouseover', function () {
        qh.style.display = 'block';
        qh2.style.display = 'none';
        er.style.textDecoration = 'underline';
        er.style.color = '#ff6a00';
        cd.style.textDecoration = 'none';
        cd.style.color = 'black';
    });

    cd.addEventListener('mouseover', function () {
        qh.style.display = 'none';
        qh2.style.display = 'block';
        cd.style.textDecoration = 'underline';
        cd.style.color = '#ff6a00';
        er.style.textDecoration = 'none';
        er.style.color = 'black';
    });

    Hot.addEventListener('mousemove', function () {
        HotProduct.style.display = 'block';
        TvProduct.style.display = 'none';
        airProduct.style.display = 'none';
        Hot.style.textDecoration = 'underline';
        Hot.style.color = '#ff6a00';
        air.style.textDecoration = 'none';
        air.style.color = 'black';
        TV.style.textDecoration = 'none';
        TV.style.color = 'black';

    });

    air.addEventListener('mousemove', function () {
        HotProduct.style.display = 'none';
        TvProduct.style.display = 'none';
        airProduct.style.display = 'block';
        Hot.style.textDecoration = 'none';
        Hot.style.color = 'black';
        air.style.textDecoration = 'underline';
        air.style.color = '#ff6a00';
        TV.style.textDecoration = 'none';
        TV.style.color = 'black';

    });

    TV.addEventListener('mousemove', function () {
        HotProduct.style.display = 'none';
        TvProduct.style.display = 'block';
        airProduct.style.display = 'none';
        Hot.style.textDecoration = 'none';
        Hot.style.color = 'black';
        air.style.textDecoration = 'none';
        air.style.color = 'black';
        TV.style.textDecoration = 'underline';
        TV.style.color = '#ff6a00';

    });

    electric.addEventListener('mousemove', function () {
        electricProduct.style.display = 'block';
        sweeperProduct.style.display = 'none';
        purificationProduct.style.display = 'none';
        cleanProduct.style.display = 'none';
        electric.style.textDecoration = 'underline';
        electric.style.color = '#ff6a00';
        sweeper.style.textDecoration = 'none';
        sweeper.style.color = 'black';
        purification.style.textDecoration = 'none';
        purification.style.color = 'black';
        clean.style.textDecoration = 'none';
        clean.style.color = 'black';
    });

    sweeper.addEventListener('mousemove', function () {
        electricProduct.style.display = 'none';
        sweeperProduct.style.display = 'block';
        purificationProduct.style.display = 'none';
        cleanProduct.style.display = 'none';
        electric.style.textDecoration = 'none';
        electric.style.color = 'black';
        sweeper.style.textDecoration = 'underline';
        sweeper.style.color = '#ff6a00';
        purification.style.textDecoration = 'none';
        purification.style.color = 'black';
        clean.style.textDecoration = 'none';
        clean.style.color = 'black';
    });

    purification.addEventListener('mousemove', function () {
        electricProduct.style.display = 'none';
        sweeperProduct.style.display = 'none';
        purificationProduct.style.display = 'block';
        cleanProduct.style.display = 'none';
        electric.style.textDecoration = 'none';
        electric.style.color = 'black';
        sweeper.style.textDecoration = 'none';
        sweeper.style.color = 'black';
        purification.style.textDecoration = 'underline';
        purification.style.color = '#ff6a00';
        clean.style.textDecoration = 'none';
        clean.style.color = 'black';
    });

    clean.addEventListener('mousemove', function () {
        electricProduct.style.display = 'none';
        sweeperProduct.style.display = 'none';
        purificationProduct.style.display = 'none';
        cleanProduct.style.display = 'block';
        electric.style.textDecoration = 'none';
        electric.style.color = 'black';
        sweeper.style.textDecoration = 'none';
        sweeper.style.color = 'black';
        purification.style.textDecoration = 'none';
        purification.style.color = 'black';
        clean.style.textDecoration = 'underline';
        clean.style.color = '#ff6a00';
    });

    water.addEventListener('mousemove', function () {
        waterProduct.style.display = 'block';
        smokeProduct.style.display = 'none';
        riceProduct.style.display = 'none';
        steamingProduct.style.display = 'none';
        water.style.textDecoration = 'underline';
        water.style.color = '#ff6a00';
        smoke.style.textDecoration = 'none';
        smoke.style.color = 'black';
        rice.style.textDecoration = 'none';
        rice.style.color = 'black';
        steaming.style.textDecoration = 'none';
        steaming.style.color = 'black';
    });

    smoke.addEventListener('mousemove', function () {
        waterProduct.style.display = 'none';
        smokeProduct.style.display = 'block';
        riceProduct.style.display = 'none';
        steamingProduct.style.display = 'none';
        water.style.textDecoration = 'none';
        water.style.color = 'black';
        smoke.style.textDecoration = 'underline';
        smoke.style.color = '#ff6a00';
        rice.style.textDecoration = 'none';
        rice.style.color = 'black';
        steaming.style.textDecoration = 'none';
        steaming.style.color = 'black';
    });

    rice.addEventListener('mousemove', function () {
        waterProduct.style.display = 'none';
        smokeProduct.style.display = 'none';
        riceProduct.style.display = 'block';
        steamingProduct.style.display = 'none';
        water.style.textDecoration = 'none';
        water.color = 'black';
        smoke.style.textDecoration = 'none';
        smoke.style.color = 'black';
        rice.style.textDecoration = 'underline';
        rice.style.color = '#ff6a00';
        steaming.style.textDecoration = 'none';
        steaming.style.color = 'black';
    });

    steaming.addEventListener('mousemove', function () {
        waterProduct.style.display = 'none';
        smokeProduct.style.display = 'none';
        riceProduct.style.display = 'none';
        steamingProduct.style.display = 'block';
        water.style.textDecoration = 'none';
        water.style.color = 'black';
        smoke.style.textDecoration = 'none';
        smoke.style.color = 'black';
        rice.style.textDecoration = 'none';
        rice.style.color = 'black';
        steaming.style.textDecoration = 'underline';
        steaming.style.color = '#ff6a00';
    });

    speaker.addEventListener('mousemove', function () {
        DoorProduct.style.display = 'none';
        routerProduct.style.display = 'none';
        smartProduct.style.display = 'none';
        speakerProduct.style.display = 'block';
        smart.style.textDecoration = 'none';
        smart.style.color = 'black';
        router.style.textDecoration = 'none';
        router.style.color = 'black';
        Door.style.textDecoration = 'none';
        Door.style.color = 'black';
        speaker.style.textDecoration = 'underline';
        speaker.style.color = '#ff6a00';
    });

    smart.addEventListener('mousemove', function () {
        speakerProduct.style.display = 'none';
        DoorProduct.style.display = 'none';
        routerProduct.style.display = 'none';
        smartProduct.style.display = 'block';
        speaker.style.textDecoration = 'none';
        speaker.style.color = 'black';
        Door.style.textDecoration = 'none';
        Door.style.color = 'black';
        router.style.textDecoration = 'none';
        router.style.color = 'black';
        smart.style.textDecoration = 'underline';
        smart.style.color = '#ff6a00';
    });

    router.addEventListener('mousemove', function () {
        speakerProduct.style.display = 'none';
        DoorProduct.style.display = 'none';
        smartProduct.style.display = 'none';
        routerProduct.style.display = 'block';
        speaker.style.textDecoration = 'none';
        speaker.style.color = 'black';
        Door.style.textDecoration = 'none';
        Door.style.color = 'black';
        smart.style.textDecoration = 'none';
        smart.style.color = 'black';
        router.style.textDecoration = 'underline';
        router.style.color = '#ff6a00';
    });

    Door.addEventListener('mousemove', function () {
        speakerProduct.style.display = 'none';
        routerProduct.style.display = 'none';
        smartProduct.style.display = 'none';
        DoorProduct.style.display = 'block';
        speaker.style.textDecoration = 'none';
        speaker.style.color = 'black';
        smart.style.textDecoration = 'none';
        smart.style.color = 'black';
        router.style.textDecoration = 'none';
        router.style.color = 'black';
        Door.style.textDecoration = 'underline';
        Door.style.color = '#ff6a00';
    });
}

function ce() {
    // 获取元素及其对应的图片元素
    let iphone = document.getElementById('iphone');
    let grzx = document.getElementById('grzx');
    let shfw = document.getElementById('shfw');
    let rgkf = document.getElementById('rgkf');
    let gwc = document.getElementById('gwc');
    let topElem = document.getElementById('top');

    let iphone_img = document.getElementById('iphone_img');
    let grzx_img = document.getElementById('grzx_img');
    let shfw_img = document.getElementById('shfw_img');
    let rgkf_img = document.getElementById('rgkf_img');
    let gwc_img = document.getElementById('gwc_img');
    let top_img = document.getElementById('top_img');

    // 为 iphone 元素添加事件监听
    iphone.addEventListener('mousemove', function () {
        iphone_img.innerHTML = '<img src="images/10007.png" alt="">';
    });
    iphone.addEventListener('mouseout', function () {
        iphone_img.innerHTML = '<img src="images/iphone.png" alt="">';
    });

    // 为 grzx 元素添加事件监听
    grzx.addEventListener('mousemove', function () {
        grzx_img.innerHTML = '<img src="images/10001.png" alt="">';
    });
    grzx.addEventListener('mouseout', function () {
        grzx_img.innerHTML = '<img src="images/10008.png" alt="">';
    });

    // 为 shfw 元素添加事件监听
    shfw.addEventListener('mousemove', function () {
        shfw_img.innerHTML = '<img src="images/10003.png" alt="">';
    });
    shfw.addEventListener('mouseout', function () {
        shfw_img.innerHTML = '<img src="images/10002.png" alt="">';
    });

    // 为 rgkf 元素添加事件监听
    rgkf.addEventListener('mousemove', function () {
        rgkf_img.innerHTML = '<img src="images/10001.png" alt="">';
    });
    rgkf.addEventListener('mouseout', function () {
        rgkf_img.innerHTML = '<img src="images/10008.png" alt="">';
    });

    // 为 gwc 元素添加事件监听
    gwc.addEventListener('mousemove', function () {
        gwc_img.innerHTML = '<img src="images/10006.png" alt="">';
    });
    gwc.addEventListener('mouseout', function () {
        gwc_img.innerHTML = '<img src="images/10005.png" alt="">';
    });

    // 为 top 元素添加事件监听
    topElem.addEventListener('mousemove', function () {
        top_img.innerHTML = '<img src="images/totop_hover.png" alt="">';
    });
    topElem.addEventListener('mouseout', function () {
        top_img.innerHTML = '<img src="images/totop.png" alt="">';
    });

}
function fhtop() {
    // 回到顶部的函数
    function scrollToTop() {
        // 计算每次滚动的距离
        const scrollStep = -window.scrollY / (500 / 15);
        // 创建一个定时器，每隔 15 毫秒滚动一次
        const scrollInterval = setInterval(function () {
            if (window.scrollY !== 0) {
                window.scrollBy(0, scrollStep);
            } else {
                clearInterval(scrollInterval);
            }
        }, 15);
    }

    // 获取超链接元素
    const topButton = document.getElementById('top');


    // 为回到顶部的超链接添加点击事件
    topButton.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止默认的超链接跳转行为
        scrollToTop();
    });


    // 页面加载时调用 handleScroll 函数进行初始检查
    window.addEventListener('DOMContentLoaded', handleScroll);
}
ProductNav();
lunbo();
qh();
ce();
fhtop();